<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象扩展</title>
</head>
<body>
    <div></div>
    <script>
        //1、简洁属性
        let name = '小明';
        let age = 12;      
        //es5
        var obj1 = {
            name:name,
            age:age,
            show:function(){
                console.log('hello')
            }
        }
        //es6
        let obj2 = {
            name,
            age,
            show(){
                console.log('world');
            }
        }
        console.log(obj1,obj2)

        //2、属性名可以引入变量
        let name2 = 'show1';
        let fnName = 'up'
        let obj3 = {
            test:'show',
            [name2]:'world',
            [fnName](){
                console.log('函数名为变量。。')
            }
        } 
        var obj ={
            test:1,
            test2:2
        }
        console.log(obj3)
        console.log(obj3[fnName]())

        //3、合并属性
        const target = {
            a: 1,
            b: 2
        }
        const source = {
            b: 4,
            c: 5
        }
        const source2 = {
            d: 5
        }
        const returnedTarget = Object.assign(target, source)
        console.log(target)//相同的属性会覆盖
        // expected output: Object { a: 1, b: 4, c: 5 }
        console.log(returnedTarget)
        // expected output: Object { a: 1, b: 4, c: 5 }
        //通常使用合并两个对象，并不像改变原来的对象
        const s3 = Object.assign({},source2,source)
        console.log(s3)// {d: 5, b: 4, c: 5}

        //4、浅拷贝
        const obj4 = {a: {b: 1}};
        const obj5 = Object.assign({}, obj4);

        obj4.a.b = 2;//修改obj4里面属性的对象的值，拷贝的对象里面的值也会改变。
        obj5.a.b // 2
        console.log(obj5.a.b)
    </script>
</body>
</html>